<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <canvas width="1000" height="1000"></canvas>
</body>

<script>
    let canvas = document.querySelector('canvas');

    let context = canvas.getContext('2d');

    // //填充颜色
    // ctx.fillStyle = "red";
    // //绘制矩形：x、y、w、h
    // ctx.fillRect(100,20,50,50);

    // context.strokeStyle = 'cyan';
    // canvas.onmousedown = function (e) {
    //     context.moveTo(e.clientX, e.clientY);
    //     canvas.onmousemove = function (e) {
    //         context.lineTo(e.clientX, e.clientY);
    //         context.stroke();
    //     }

    //     canvas.onmouseup = function(){
    //         canvas.onmousemove = null
    //     }
    // }

    context.beginPath();
    context.arc(300, 350, 100, 0, Math.PI * 2, true);
    //不关闭路径路径会一直保留下去
    context.closePath();
    context.fillStyle = 'rgba(0,255,0,0.25)';
    context.fill();
    context.strokeStyle = 'red'
    context.stroke()

    context.beginPath();
    context.arc(350, 350, 100, 0, Math.PI * 2, true);
    //不关闭路径路径会一直保留下去
    context.closePath();
    context.fillStyle = 'rgba(255,255,0,0.25)';
    context.fill();
    context.strokeStyle = 'blue'
    context.stroke()

</script>

</html>